<template>
  <div class="ikun-basehome-container ikun-pvp-container">
    <div class="ikun-pvp-left-container">
      <div class="ikun-pvp-battle-process" v-for="(process, index) in data.battleProcess" :key="index">
        {{ process.process }}
      </div>
    </div>
    <el-divider direction="vertical" />
    <!-- <el-scrollbar style="height:calc(100% - 60px);"> -->
    <div class="ikun-pvp-right-container">
      <div class="ikun-pvp-right-lists">
        <el-table
          :data="data.userList"
          >
          <el-table-column type="index" label="序号"/>
          <el-table-column prop="region" label="区域" />
          <el-table-column prop="level" label="等级" />
          <el-table-column prop="nickname" label="昵称" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="userGrade(scope.row.id)" plain type="info" v-show="scope.row.id != data.myId">战 斗</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="demo-pagination-block">
        <el-pagination :current-page="data.currentPage" :page-size="data.pageSize"
                       layout="prev, pager, next, jumper,sizes" :total="data.total" :page-sizes="[10, 20, 30, 40]"
                       :hide-on-single-page="data.total <= data.pageSize" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- </el-scrollbar> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getUserList, battle } from "@/api/index";
import store from "../../../store";

@Component({
  components: {}
})
export default class PvpView extends Vue {
  data = {
    userList: [
      {
        nickname: "",
        level: "",
        id: ""
      }
    ],
    currentPage: 1,
    pageSize: 20,
    total: 50,
    battleProcess: [
      {
        process: "青山湿遍君不知，一江清水独自流"
      }
    ],
    myId: ""
  };

  created() {
    let data = {
      "page": {
        "current": this.data.currentPage,
        "size": this.data.pageSize,
        "orders": [{
          "column": "level",
          "asc": false
        },
          {
            "column": "exp",
            "asc": false
          }
        ]
      }
    };
    this.getUserList(data);
    // console.log(store.state)
    this.$set(this.data, "myId", store.state.userInfo?.id);
  }

  getUserList(data: any) { //获取角色列表
    getUserList(data).then((res: any) => {
      console.log(res);
      this.$set(this.data, "userList", res.data.records);
      this.$set(this.data, "total", res.data.total);
      this.$set(this.data, "size", res.data.pageSize);
    });
  }

  userGrade = (id: any) => { //战斗过程
    let data = {
      "defender": {
        "id": id
      },
      "attacker": {}
    };
    battle(data).then((res: any) => {
      this.$set(this.data, "battleProcess", res?.data?.processList);
      let data = {
        "page": {
          "current": this.data.currentPage,
          "size": this.data.pageSize,
          "orders": [
            {
              "column": "exp",
              "asc": false
            }
          ]
        }
      };
      this.getUserList(data);
    });
  };
  handleSizeChange = (e: number) => { //每页数量发生改变事件
    this.data.pageSize = e;
    let data = {
      "page": {
        "current": this.data.currentPage,
        "size": this.data.pageSize,
        "orders": [{
          "column": "level",
          "asc": false
        },
          {
            "column": "exp",
            "asc": false
          }
        ]
      }
    };
    this.getUserList(data);
  };
  handleCurrentChange = (e: number) => { //页数改变事件
    this.data.currentPage = e;
    let data = {
      "page": {
        "current": this.data.currentPage,
        "size": this.data.pageSize,
        "orders": [{
          "column": "level",
          "asc": false
        },
          {
            "column": "exp",
            "asc": false
          }
        ]
      }
    };
    this.getUserList(data);
  };
}
</script>

<style lang="stylus">
@import "./style.styl"
</style>
